<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap Template</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="../../../css/mdb.min.css" rel="stylesheet">



    <style>
        html,
        body,
        header,
        .view {
            height: 100%;
        }
        /* Navigation*/
        
        .navbar {
            background-color: transparent;
        }
        
        .top-nav-collapse {
            background-color: #006296;
        }
        
        @media only screen and (max-width: 768px) {
            .navbar {
                background-color: #006296;
            }
        }
        /*Intro*/
        
        .view {
            background: url("http://mdbootstrap.com/images/regular/people/img%20(54).jpg")no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        
        @media (max-width: 768px) {
            .full-bg-img,
            .view {
                height: auto;
                position: relative;
            }
        }
        
        .description {
            padding-top: 25%;
            padding-bottom: 3rem;
            color: #fff
        }
        
        @media (max-width: 992px) {
            .description {
                padding-top: 7rem;
                text-align: center;
            }
        }
        footer.page-footer {
            background-color: #077AB7;
        }
    </style>

</head>

<body>

    <!--Navigation & Intro-->
    <header>

        <!--Navbar-->
        <nav class="navbar navbar-dark navbar-fixed-top scrolling-navbar">

            <!-- Collapse button-->
            <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx">
            <i class="fa fa-bars"></i></button>

            <div class="container">

                <!--Collapse content-->
                <div class="collapse navbar-toggleable-xs" id="collapseEx">
                    <!--Navbar Brand-->
                    <a class="navbar-brand" href="http://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
                    <!--Links-->
                    <ul class="nav navbar-nav smooth-scroll">
                        <li class="nav-item">
                            <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#best-features">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#examples-of-use">Examples</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#testimonials">Testimonials</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#pricing">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#our-team">Team</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>

                    <!--Navbar icons-->
                    <ul class="nav navbar-nav nav-flex-icons">
                        <li class="nav-item wow fadeInRight" data-wow-delay="0.2s">
                            <a class="nav-link"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li class="nav-item wow fadeInRight" data-wow-delay="0.3s">
                            <a class="nav-link"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li class="nav-item wow fadeInRight" data-wow-delay="0.4s">
                            <a class="nav-link"><i class="fa fa-instagram"></i></a>
                        </li>
                    </ul>

                </div>
                <!--/.Collapse content-->

            </div>

        </nav>
        <!--/.Navbar-->

        <!--Mask-->
        <div class="view hm-black-strong">
            <div class="full-bg-img flex-center">
                <div class="container">
                    <div class="row" id="home">

                        <!--First column-->
                        <div class="col-lg-6">
                            <div class="description">
                                <h2 class="h2-responsive wow fadeInLeft">We like to receive a messages </h2>
                                <hr class="hr-light wow fadeInLeft">
                                <p class="wow fadeInLeft" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</p>
                                <br>
                                <a class="btn btn-git btn-lg wow fadeInLeft" data-wow-delay="0.7s">Learn more</a>
                            </div>
                        </div>
                        <!--/.First column-->

                        <!--Second column-->
                        <div class="col-lg-6 wow fadeInRight">
                            <!--Form-->
                            <div class="card">
                                <div class="card-block">
                                    <!--Header-->
                                    <div class="text-xs-center">
                                        <h3><i class="fa fa-envelope"></i> Write to us:</h3>
                                        <hr>
                                    </div>

                                    <!--Body-->
                                    <div class="md-form">
                                        <i class="fa fa-user prefix"></i>
                                        <input type="text" id="form3" class="form-control">
                                        <label for="form3">Your name</label>
                                    </div>
                                    <div class="md-form">
                                        <i class="fa fa-envelope prefix"></i>
                                        <input type="text" id="form2" class="form-control">
                                        <label for="form2">Your email</label>
                                    </div>

                                    <!--Textarea with icon prefix-->
                                    <div class="md-form">
                                        <i class="fa fa-pencil prefix"></i>
                                        <textarea type="text" id="form8" class="md-textarea"></textarea>
                                        <label for="form8">Your message</label>
                                    </div>

                                    <div class="text-xs-center">
                                        <button class="btn btn-git btn-lg">Send</button>
                                        <hr>
                                        <fieldset class="form-group">
                                            <input type="checkbox" id="checkbox1">
                                            <label for="checkbox1">Subscribe me to the newsletter</label>
                                        </fieldset>
                                    </div>

                                </div>
                            </div>
                            <!--/.Form-->
                        </div>
                        <!--/Second column-->
                    </div>
                </div>
            </div>
        </div>
        <!--/.Mask-->

    </header>
    <!--/Navigation & Intro-->
    
    <!--Main layout-->
    <main>
        <div class="container">
            
            <!--Section: Features v.2-->
            <section class="section feature-box" id="best-features">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Why is it so great?</h1>
                <!--Section description-->
                <p class="section-description lead wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

                <!--First row-->
                <div class="row features-small">

                    <!--First column-->
                    <div class="col-md-4 wow fadeInDown" data-wow-delay="0.2s">
                        <div class="col-xs-2">
                            <i class="fa fa-bullhorn blue-text"></i>
                        </div>
                        <div class="col-xs-10">
                            <h4 class="feature-title">Marketing</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                            <a class="btn btn-primary">Learn more</a>
                            <div style="height:20px"></div>
                        </div>
                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-4 wow fadeInDown" data-wow-delay="0.3s">
                        <div class="col-xs-2">
                            <i class="fa fa-cogs green-text"></i>
                        </div>
                        <div class="col-xs-10">
                            <h4 class="feature-title">Customization</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                            <a class="btn btn-default">Learn more</a>
                            <div style="height:20px"></div>
                        </div>
                    </div>
                    <!--/Second column-->

                    <!--Third column-->
                    <div class="col-md-4 wow fadeInDown" data-wow-delay="0.4s">
                        <div class="col-xs-2">
                            <i class="fa fa-dashboard red-text"></i>
                        </div>
                        <div class="col-xs-10">
                            <h4 class="feature-title">Support</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                            <a class="btn btn-danger">Learn more</a>
                            <div style="height:20px"></div>
                        </div>
                    </div>
                    <!--/Third column-->
                </div>
                <!--/First row-->

            </section>
            <!--/Section: Features v.2-->
            
            <hr class="between-sections">
            
            <!--Projects section v.3-->
            <section class="section text-xs-center" id="examples-of-use">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our best projects</h1>
                <!--Section description-->
                <p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

                <!--First row-->
                <div class="row">

                    <!--First column-->
                    <div class="col-md-6 mb-r wow fadeInLeft" data-wow-delay="0.3s">

                        <!--Featured image-->
                        <div class="view overlay hm-white-slight z-depth-2">
                            <img src="http://mdbootstrap.com/images/regular/city/img%20(5).jpg">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>

                        <!--Excerpt-->
                        <div class="card-block">
                            <h5 class="red-text"><i class="fa fa-money"></i> Business</h5>
                            <h3>Project title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam.</p>
                            <a class="btn btn-git"><i class="fa fa-clone left"></i> View project</a>
                        </div>

                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-6 mb-r wow fadeInRight" data-wow-delay="0.3s">

                        <!--Featured image-->
                        <div class="view overlay hm-white-slight z-depth-2">
                            <img src="http://mdbootstrap.com/images/regular/city/img%20(6).jpg">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>

                        <!--Excerpt-->
                        <div class="card-block">
                            <h5 class="teal-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
                            <h3>Project title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam.</p>
                            <a class="btn btn-git"><i class="fa fa-clone left"></i> View project</a>
                        </div>

                    </div>
                    <!--/Second column-->

                </div>
                <!--/First row-->

                <br>

                <!--Second row-->
                <div class="row">

                    <!--First column-->
                    <div class="col-md-6 mb-r wow fadeInLeft" data-wow-delay="0.4s">

                        <!--Featured image-->
                        <div class="view overlay hm-white-slight z-depth-2">
                            <img src="http://mdbootstrap.com/images/regular/city/img%20(26).jpg">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>

                        <!--Excerpt-->
                        <div class="card-block">
                            <h5 class="cyan-text"><i class="fa fa-desktop"></i> Software</h5>
                            <h3>Project title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam.</p>
                            <a class="btn btn-git"><i class="fa fa-clone left"></i> View project</a>
                        </div>

                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-6 mb-r wow fadeInRight" data-wow-delay="0.4s">

                        <!--Featured image-->
                        <div class="view overlay hm-white-slight z-depth-2">
                            <img src="http://mdbootstrap.com/images/regular/city/img%20(25).jpg">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>

                        <!--Excerpt-->
                        <div class="card-block">
                            <h5 class="indigo-text"><i class="fa fa-graduation-cap"></i> Education</h5>
                            <h3>Project title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam.</p>
                            <a class="btn btn-git"><i class="fa fa-clone left"></i> View project</a>
                        </div>

                    </div>
                    <!--/Second column-->

                </div>
                <!--/Second row-->
            </section>
            <!--/Projects section v.3-->
            
            <hr class="between-sections">
            
            <!--Section: Testimonials v.1-->
            <section class="section" id="testimonials">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Testimonials</h1>
                <!--Section description-->
                <p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

                <div class="row">

                    <!--First column -->
                    <div class="col-md-4 mb-r wow fadeInLeft" data-wow-delay="0.2s">

                        <!--Card-->
                        <div class="card testimonial-card">

                            <!--Background color-->
                            <div class="card-up teal lighten-2">
                            </div>

                            <!--Avatar-->
                            <div class="avatar"><img src="http://mdbootstrap.com/wp-content/uploads/2015/10/avatar-2.jpg" class="rounded-circle img-responsive">
                            </div>

                            <div class="card-block">
                                <!--Name-->
                                <h4 class="card-title">Anna Doe</h4>
                                <hr>
                                <!--Quotation-->
                                <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.</p>
                            </div>

                        </div>
                        <!--/.Card-->


                    </div>
                    <!--/First column -->

                    <!--Second column-->
                    <div class="col-md-4 mb-r wow fadeInLeft" data-wow-delay="0.3s">

                        <!--Card-->
                        <div class="card testimonial-card">

                            <!--Background color-->
                            <div class="card-up indigo darken-2">
                            </div>

                            <!--Avatar-->
                            <div class="avatar"><img src="http://mdbootstrap.com/wp-content/uploads/2015/10/avatar-1.jpg" class="rounded-circle img-responsive">
                            </div>

                            <div class="card-block">
                                <!--Name-->
                                <h4 class="card-title">John Aston</h4>
                                <hr>
                                <!--Quotation-->
                                <p><i class="fa fa-quote-left"></i> Neque cupiditate assumenda in maiores repudiandae mollitia architecto.</p>
                            </div>

                        </div>
                        <!--/.Card-->


                    </div>
                    <!--/Second column-->

                    <!--Third column-->
                    <div class="col-md-4 mb-r wow fadeInLeft" data-wow-delay="0.4s">

                        <!--Card-->
                        <div class="card testimonial-card">

                            <!--Background color-->
                            <div class="card-up purple darken-2"></div>

                            <!--Avatar-->
                            <div class="avatar"><img src="http://mdbootstrap.com/wp-content/uploads/2015/10/avatar-3.jpg" class="rounded-circle img-responsive">
                            </div>

                            <div class="card-block">
                                <!--Name-->
                                <h4 class="card-title">Maria Kate</h4>
                                <hr>
                                <!--Quotation-->
                                <p><i class="fa fa-quote-left"></i> Delectus impedit saepe officiis ab aliquam repellat, rem totam unde ducimus.</p>
                            </div>

                        </div>
                        <!--/.Card-->


                    </div>
                    <!--/Third column-->

                </div>

            </section>
            <!--Section: Testimonials v.1-->
            
            <hr class="between-sections">
            
            <!--Section: Pricing v.3-->
            <section class="section" id="pricing">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Our pricing plans</h1>
                <!--Section description-->
                <p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

                <!--First row-->
                <div class="row">

                    <!--First column-->
                    <div class="col-lg-4 col-md-6 mb-r wow fadeInLeft">
                        <!--Card-->
                        <div class="card">

                            <!--Content-->
                            <div class="text-xs-center">
                                <div class="card-block">
                                    <h5>Basic plan</h5>
                                    <div class="flex-center">
                                        <div class="card-circle">
                                            <i class="fa fa-home blue-text"></i>
                                        </div>
                                    </div>

                                    <!--Price-->
                                    <h2><strong>59$</strong></h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.</p>
                                    <a class="btn btn-primary btn-rounded">Buy now</a>
                                </div>
                            </div>

                        </div>
                        <!--/.Card-->
                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-lg-4 col-md-6 mb-r wow fadeInUp">
                        <!--Card-->
                        <div class="card teal">

                            <!--Content-->
                            <div class="text-xs-center white-text">
                                <div class="card-block">
                                    <h5>Premium plan</h5>
                                    <div class="flex-center">
                                        <div class="card-circle">
                                            <i class="fa fa-group white-text"></i>
                                        </div>
                                    </div>

                                    <!--Price-->
                                    <h2><strong>79$</strong></h2>
                                    <p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.</p>
                                    <a class="btn btn-outline-white btn-rounded">Buy now</a>
                                </div>
                            </div>

                        </div>
                        <!--/.Card-->
                    </div>
                    <!--/Second column-->

                    <!--Third column-->
                    <div class="col-lg-4 col-md-6 mb-r wow fadeInRight">
                        <!--Card-->
                        <div class="card">

                            <!--Content-->
                            <div class="text-xs-center">
                                <div class="card-block">
                                    <h5>Advanced plan</h5>
                                    <div class="flex-center">
                                        <div class="card-circle">
                                            <i class="fa fa-bar-chart blue-text"></i>
                                        </div>
                                    </div>

                                    <!--Price-->
                                    <h2><strong>99$</strong></h2>
                                    <p>At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.</p>
                                    <a class="btn btn-primary btn-rounded">Buy now</a>
                                </div>
                            </div>

                        </div>
                        <!--/.Card-->
                    </div>
                    <!--/Third column-->

                </div>
                <!--/First row-->

            </section>
            <!--/Section: Pricing v.3-->
            
            <hr class="between-sections">
            
            <!--Section: Team v.2-->
            <section class="section team-section" id="our-team"> 

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Meet our amazing team</h1>
                <!--Section description-->
                <p class="section-description wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

                <div class="row text-xs-center">

                    <!--First column-->
                    <div class="col-md-4 mb-r wow fadeIn" data-wow-delay="0.3s">
                        <div class="avatar">
                            <img src="http://mdbootstrap.com/images/avatars/img%20(5).jpg">
                        </div>
                        <h4>Maria Kate</h4>
                        <h5>Photographer</h5>

                        <!--Facebook-->
                        <a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Pinterest-->
                        <a type="button" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"></i></a>
                        <!--Instagram-->
                        <a type="button" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"></i></a>

                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-4 mb-r wow fadeIn" data-wow-delay="0.4s">
                        <div class="avatar">
                            <img src="http://mdbootstrap.com/images/avatars/img%20(6).jpg">
                        </div>
                        <h4>Sarah Melyah</h4>
                        <h5>Front-end Developer</h5>

                        <!--Google +-->
                        <a type="button" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"></i></a>
                        <!--Facebook-->
                        <a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--GitHub-->
                        <a type="button" class="btn-floating btn-small btn-git"><i class="fa fa-github"></i></a>

                    </div>
                    <!--/Second column-->

                    <!--Third column-->
                    <div class="col-md-4 mb-r wow fadeIn" data-wow-delay="0.5s">
                        <div class="avatar">
                            <img src="http://mdbootstrap.com/images/avatars/img%20(8).jpg">
                        </div>
                        <h4>John Doe</h4>
                        <h5>Web Developer</h5>

                        <!--Linkedin-->
                        <a type="button" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"></i></a>
                        <!--Twitter-->
                        <a type="button" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Dribbble-->
                        <a type="button" class="btn-floating btn-small btn-dribbble"><i class="fa fa-dribbble"></i></a>

                    </div>
                    <!--/Third column-->
                </div>

            </section>
            <!--/Section: Team v.2-->
        
            <hr class="between-sections">
           
            <!--Section: Contact v.1-->
            <section class="section mb-4" id="contact">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Contact</h1>
                <!--Section description-->
                <p class="section-description mb-5 wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

                <div class="row">

                    <!--First column-->
                    <div class="col-md-5 wow fadeInLeft">

                        <!--Form with header-->
                        <div class="card">

                            <div class="card-block">
                                <!--Header-->
                                <div class="form-header btn-git">
                                    <h3><i class="fa fa-envelope"></i> Write to us:</h3>
                                </div>

                                <p>We'll write rarely, but only the best content.</p>
                                <br>

                                <!--Body-->
                                <div class="md-form">
                                    <i class="fa fa-user prefix"></i>
                                    <input type="text" id="form3" class="form-control">
                                    <label for="form3">Your name</label>
                                </div>

                                <div class="md-form">
                                    <i class="fa fa-envelope prefix"></i>
                                    <input type="text" id="form2" class="form-control">
                                    <label for="form2">Your email</label>
                                </div>

                                <div class="md-form">
                                    <i class="fa fa-tag prefix"></i>
                                    <input type="text" id="form32" class="form-control">
                                    <label for="form32">Subject</label>
                                </div>

                                <div class="md-form">
                                    <i class="fa fa-pencil prefix"></i>
                                    <textarea type="text" id="form8" class="md-textarea"></textarea>
                                    <label for="form8">Icon Prefix</label>
                                </div>

                                <div class="text-xs-center">
                                    <button class="btn btn-git">Submit</button>
                                </div>

                            </div>

                        </div>
                        <!--/Form with header-->

                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-7">

                        <!--Google map-->
                        <div id="map-container" class="z-depth-1-half map-container wow fadeInRight" style="height: 400px"></div>

                        <br>
                        <!--Buttons-->
                        <div class="row text-xs-center">
                            <div class="col-md-4 wow fadeIn" data-wow-delay="0.4s">
                                <a class="btn-floating btn-small btn-git"><i class="fa fa-map-marker"></i></a>
                                <p>New York, NY 10012</p>
                                <p>United States</p>
                            </div>

                            <div class="col-md-4 wow fadeIn" data-wow-delay="0.5s">
                                <a class="btn-floating btn-small btn-git"><i class="fa fa-phone"></i></a>
                                <p>+ 01 234 567 89</p>
                                <p>Mon - Fri, 8:00-22:00</p>
                            </div>

                            <div class="col-md-4 wow fadeIn" data-wow-delay="0.6s">
                                <a class="btn-floating btn-small btn-git"><i class="fa fa-envelope"></i></a>
                                <p>info@gmail.com</p>
                                <p>sale@gmail.com</p>
                            </div>
                        </div>

                    </div>
                    <!--/Second column-->

                </div>

            </section>
            <!--/Section: Contact v.1-->
        
        </div>
    </main>
    <!--/Main layout-->
    
    <!--Footer: CTA, Social Media, Additional Info & Links-->
    <footer class="page-footer center-on-small-only">

        <!--Call to action-->
        <div class="call-to-action">
            <ul>
                <li>
                    <h5>Register for free</h5></li>
                <li><a href="" class="btn btn-danger">Sign up!</a></li>
            </ul>
        </div>
        <!--/.Call to action-->

        <hr>

        <!--Social buttons-->
        <div class="social-section">
            <ul>
                <li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                <li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                <li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                <li><a href="https://www.linkedin.com/in/dawid-adach-97435534/pl" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                <li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                <li><a href="https://www.instagram.com/mdbootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
            </ul>
        </div>
        <!--/.Social buttons-->

        <!--Copyright-->
        <div class="footer-copyright">
            <div class="container-fluid">
                © 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>

            </div>
        </div>
        <!--/.Copyright-->

    </footer>
    <!--/.Footer: CTA, Social Media, Additional Info & Links-->


    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>

    <!-- Tooltips -->
    <script type="text/javascript" src="../../../js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="../../../js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="../../../js/mdb.min.js"></script>

    <!--Google Maps-->
    <script src="http://maps.google.com/maps/api/js"></script>

    <script>
        function init_map() {

            var var_location = new google.maps.LatLng(40.725118, -73.997699);

            var var_mapoptions = {
                center: var_location,

                zoom: 14
            };

            var var_marker = new google.maps.Marker({
                position: var_location,
                map: var_map,
                title: "New York"
            });

            var var_map = new google.maps.Map(document.getElementById("map-container"),
                var_mapoptions);

            var_marker.setMap(var_map);

        }

        google.maps.event.addDomListener(window, 'load', init_map);
    </script>
    
    <script>
        new WOW().init();
    </script>

</body>

</html>